body{
    width: 100vw;
    height: 100vh;
    background-color: cyan;
    display: grid;
    main{
        width: 400px;
        height: 400px;
        border: solid 1px blanchedalmond;
        justify-self: center;
        align-self: center;
 
    div{
        width: 100px;
        height: 100px;
        background-color: darkorange;
        animation-name: ld-fangda;
        animation-duration: 1s;
        // animation-direction: alternate;
        animation-iteration-count: 2;
        animation-timing-function: ease-in-out;
        animation-name: ld-move;
        animation-duration: 3s;    
         
        // animation-name: ld-opacity;
        // animation-duration: 1s;
     }
    }
}

@keyframes ld-fangda {
    100%{
        transform: scale(2);
    }
}

@keyframes ld-move {
    25%{
        transform: translateX(300px);
    }
    50%{
        transform: translateX(300px) translateY(300px);
    }
    75%{
        transform: translateX(300px) translateY(300px) translateX(-300px);
    }
}


@keyframes ld-opacity {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}